<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <link rel="icon" href="/web页面/logo3.png" type="image/png">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="vue.global.js"></script>
    <script src="axios.min.js"></script>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f4;
            padding: 20px;
        }

        .cart-container {
            width: 80%;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .top-nav {
            display: flex;
            justify-content: space-between; /* 在标题和链接之间添加空间 */
            align-items: center; /* 垂直居中 */
            margin-bottom: 20px; /* 在导航和表格之间添加一些空间 */
        }

        .top-nav .order-link {
            color: #fb6900; /* 保持链接颜色 */
            text-decoration: none; /* 去除下划线 */
            font-size: 1em; /* 调整字体大小 */
        }

        /* 可以添加一些悬停效果 */
        .top-nav .order-link:hover {
            text-decoration: underline; /* 添加下划线作为悬停效果 */
        }

        h1 {
            text-align: center;
            color: #333;
        }
        h3{
            text-align: center;
            color: #333;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th {
            background-color: #f5f5f5;
            color: #333;
            font-weight: bold;
        }

        td {
            padding: 10px;
            text-align: center;
            vertical-align: middle;
        }
        .total-price-column {
            width: 200px;
        }

        .quantity-controls {
            width: 100%;
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }
        a:link, a:visited {
            color: #fb6900;
            text-decoration: none; /* 去除下划线 */
        }
        .quantity-controls button {
            padding: 5px 10px;
            margin: 0 5px;
            cursor: pointer;
            border: none;
            background-color: #eee;
            border-radius: 4px;
        }

        .quantity-controls button:hover {
            background-color: #ddd;
        }

        .total-price {
            text-align: right;
            font-size: 1.2em;
            font-weight: bold;
            padding-left: 900px;
        }
        .checkout-section {
            display: flex;
            justify-content: space-between; /* 在元素之间添加空间 */
            align-items: center; /* 垂直居中 */
            margin-top: 20px; /* 在表格和合计区域之间添加空间 */
            padding: 10px;
            background-color: #f9f9f9; /* 轻微的背景色区分 */
            border-radius: 10px;
        }
        .checkout-btn {
            background-color: #73b275;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
            font-size: 1em;
            margin-top: 20px;
            display: block;
            width: 100%;
            border-radius: 4px;
            text-align: center;
        }
        .payment-method {
            margin-right: 20px; /* 在支付方式和合计之间添加空间 */
        }
        .checkout-btn:hover {
            background-color: #4eaf50;
        }

        .remove-btn {
            background-color: #fa6f64;
            color: white;
            padding: 5px 10px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
        }
        .checkout-btn-container {
            text-align: right; /* 将按钮放置在右侧 */
        }
        .remove-btn:hover {
            background-color: #de6666;
        }
    </style>
</head>
<body id="app">

<div class="cart-container">
    <div class="top-nav">
    <h1>购物车</h1><h3>
        <a href="/orders.html" class="order-link">切换到订单表</a></h3>
    </div>
    <table id="cartTable">
        <thead>
        <tr>

            <th>商品图片</th>
            <th>商品名</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(cart, index) in cartsList" :key="cart.id">

            <td>
                <img :src="cart.goods.pic" width="80" height="100">
            </td>
            <td>{{ cart.goods.name }}</td>
            <td>{{ cart.goods.price }}</td>
            <td>
                <div class="quantity-controls">
                    <button @click="subNum(index)" :disabled="cart.num <= 0">-</button>

                    <input type="number" v-model.number="cart.num" @blur="updateQuantity(index)" />                    <button @click="addNum(index)">+</button>
                </div>
            </td>
            <td class="total-price-column">{{ cart.goods.price * cart.num }}</td>
            <td>
                <button class="remove-btn" v-on:click="deleteCart(cart.id)">移除</button>
            </td>
            <td>
                <input type="checkbox" v-model="selectedCarts" :value="cart">
            </td>
        </tr>
        </tbody>
    </table>

    <div class="checkout-section">
        <div class="total-price">
        <span style="color: red; font-size: 20px;">
            合计： ￥ <span v-text="selectedCartsTotalPrice"></span> 元
        </span>
        </div>
        <div class="payment-method">
            <label for="paymentMethod">支付方式：</label>
            <select id="paymentMethod" v-model="selectedPaymentMethod">
                <option value="1">现金</option>
                <option value="2">微信</option>
                <option value="3">支付宝</option>
                <option value="4">网银</option>
            </select>
        </div>
        <div class="checkout-btn-container">
            <button v-on:click="this.saveOrder" class="checkout-btn">立即下单</button>
        </div>
    </div>

<script>
    const app = {

        //数据绑定
        data() {
            return {
                //购物车
                cartsList: [],
                //购物车总价
                cartsPrice: 0,
                selectedPaymentMethod: '1',
                selectedCarts: [], // 新增数组来跟踪选中的商品
            }
        },
        computed: {
            // 计算选中商品的总价
            selectedCartsTotalPrice() {
                return this.selectedCarts.reduce((total, cart) => {
                    return total + cart.goods.price * cart.num;
                }, 0);
            }
        },
        methods:{
            //获取我的购物车
            getCartsByUserId:function (){
              axios({
                  method:"post",url:"/getCartsByUserId",data:{

                  }
              }).then((response)=>{
                  this.cartsList=response.data;
                  this.getCartsAllprice(); // 在获取购物车数据后计算总价
              }).catch(error => {
                  console.error("获取购物车失败:", error);
              });
            },
            //增加商品数量
            addNum: function (index) {
                this.cartsList[index].num = this.cartsList[index].num + 1
                this.getCartsAllprice()
            },
            subNum: function (index) {
                if (this.cartsList[index].num > 0) { // 检查数量是否大于0
                    this.cartsList[index].num -= 1; // 只有在数量大于0时才减少
                }
                this.getCartsAllprice();
            },
            getCartsAllprice: function() {
                this.cartsPrice = 0;
                for (var i = 0; i < this.cartsList.length; i++) {
                    this.cartsPrice += this.cartsList[i].goods.price * this.cartsList[i].num;
                }

            },
            // 删除商品
            deleteCart: function (id) {
                axios({
                    method: "post",
                    url: "/deleteCart",
                    data: { id: id }
                }).then((response) => {
                    alert(response.data);
                    if (response.data === '已删除') {
                        this.getCartsByUserId(); // 重新获取购物车数据
                    }
                }).catch(error => {
                    console.error("删除购物车商品失败:", error);
                });
            },
            saveOrder: function () {
                let orders = this.selectedCarts.map(cart => {
                    return {
                        good_id: cart.goods.id,
                        num: cart.num,
                        paymentMethod: this.selectedPaymentMethod
                    };
                });

                axios({
                    method: "post",
                    url: "/saveOrder",
                    data: JSON.stringify(orders), // 注意这里不需要额外的对象包裹数组
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(response => {
                    // 处理响应
                    if (response.data === 'ok'){
                        alert("操作完成");
                    }
                    if(response.data==='no'){
                        alert(carts.goods.name+"库存不足")
                    }
                    this.getCartsByUserId();
                    // 下单后重新加载购物车
                    window.location.reload();
                }).catch(error => {
                    console.error("下单失败:", error);
                });
            }
        },
        //构造方法
        mounted() {
            console.log("vue启动成功！")
            this.getCartsByUserId();
            this.getCartsAllprice();
        }
    }
    Vue.createApp(app).mount("#app")
</script>

</body>
</html>
